<template>
  <div class="title" @click="goToHome">
    <h2>水源地水质实时监测预警系统</h2>
    <div class="time-display">{{ timeString }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeString: '',
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeUnmount() {
    clearInterval(this.timer)
  },
  methods: {
    updateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = (now.getMonth() + 1).toString().padStart(2, '0')
      const date = now.getDate().toString().padStart(2, '0')
      const hours = now.getHours().toString().padStart(2, '0')
      const minutes = now.getMinutes().toString().padStart(2, '0')
      const seconds = now.getSeconds().toString().padStart(2, '0')
      const weekDays = ['日', '一', '二', '三', '四', '五', '六']

      this.timeString = `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} 星期${weekDays[now.getDay()]}`
    },
    goToHome() {
      this.$router.push('/UserList') // 跳转到用户列表路径
    },
  },
}
</script>
<style scoped>
.title {
  color: white;
  margin-left: 25px;
  width: 97%;
  height: 8vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

.time-display {
  font-size: 15px;
  font-weight: bold;
  color: white;
  flex-shrink: 0;
}
</style>
